<template>
    <div id="setPassword" class="loginRegister">
        <header class="header">
            <i class="iconfont icon-zuojiantou" @click="$router.back(-1)"></i>
            <h1>设置密码</h1>
        </header>
        <form id="setPasswordForm">
            <div class="setPassword_title">请设置密码</div>            
            <div class="loginRegister_frame">
                <div class="input_list">
                    <i class="iconfont icon-mima"></i>
                    <input type="password" v-model="setPassword" name="setPassword" placeholder="密码（6-16位字母、数字、特殊字符）" />
                    <i class="iconfont icon-yincangmima" v-show="setPassword" id="isVisible" @click="isPasswordVisible($event)"></i>
                </div>                 
            </div>
            <div class="loginRegister_btn">
                <button type="button" class="submit_btn" @click="submitForm('#loginForm')">完成</button>
            </div>
        </form>
        <div class="error_warning">
            <span class="error_txt">
                账号不能为空
            </span>
        </div>    
    </div>
</template>

<script>
export default {
    name: 'setPassword',
    data() {
        return {
            "isVisible": false,   //密码不可见
            "setPassword": '',
        }
    },
    created() {
	  
    },
    mounted() {
        
    },
    methods: {
        //密码是否可见
        isPasswordVisible(event) {
            var el = event.currentTarget;
            if(this.isVisible) {
                $(el).removeClass('icon-xianshimima').addClass('icon-yincangmima').prev('input').attr('type','password');                
            }else {
                $(el).removeClass('icon-yincangmima').addClass('icon-xianshimima').prev('input').attr('type','text'); 
            }
            this.isVisible = !this.isVisible;
        },
        //提交form
        submitForm(obj) {
            var $password = $(obj).find('input[name=setPassword]'),
                passwordTxt = $.trim($password.val());
            if(passwordTxt == '') {
                this.utils.errorWarning('密码不能为空');
                return false;
            }
            var passwordReg = this.utils.passwordReg;  //密码正则
            if(!passwordReg.test(passwordTxt)) {
                this.utils.errorWarning('密码规则（6-16位字母、数字、特殊字符）');
                return false;
            }           
        }
    }
}
</script>

<style lang="scss" scoped>
#setPasswordForm {
    padding-top: 1.28rem;
    margin: 0 .533333rem;
    .setPassword_title {
        font-size: .426667rem;
        margin: .533333rem 0;
        line-height: .64rem;
    } 
}
.loginRegister_frame {
    padding-bottom: 20px;
    .input_list {
        background: #fff;
        margin: 0 0 .533333rem;
        border-radius: .213333rem;
        padding: .213333rem .32rem;
        display: flex;
        i.iconfont {
            padding-right: 10px;
            border-right: 1px solid #414568;
            &:before {
                margin-top: -2px;
                display: block;
            }
            &#isVisible {
                top: .266667rem;
            }
        }
    }
}
input[type=password]::-webkit-input-placeholder { /* WebKit browsers */ 
    font-size: .373333rem;
}   
</style>
